  var tl;
function onLoad(planId) {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           "May 1 2011 00:00:00 GMT",
        width:          "70%",
        intervalUnit:   Timeline.DateTime.MONTH,
        intervalPixels: 200
    }),
    Timeline.createBandInfo({
        showEventText: false,
        trackHeight: 2,
        trackGap: 0.2,
        eventSource:    eventSource,
        date:           "May 1 2011 00:00:00 GMT",
        width:          "30%",
        intervalUnit:   Timeline.DateTime.YEAR,
        intervalPixels: 200
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("http://localhost:9000/application/actionItemXML/"+planId, function(xml, url){eventSource.loadXML(xml, url);});
 
}
 
var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}